<template>
    <div class="screen-preview">
        <div class="background" :style="backgroundStyle">
            <div class="location-info" v-for="item in componentList" :style="locationStyle(item.location)" :key="item.key">
                <div v-if="item.objType!==3"
                     class="group-child-box">
                    <component :is="item.component" :dataJson="item.dataJson"
                               :ref="'com-'+item.key"/>
                </div>
                <div v-else class="group-child-box" v-for="groupc in item.children"
                     :key="groupc.key"
                     :style="`position:absolute;top:${groupc.transform.y}px;left:${groupc.transform.x}px;width:${groupc.transform.w}px;height:${groupc.transform.h}px`">
                    <component :is="groupc.component" :dataJson="groupc.dataJson"
                               :ref="'com-'+groupc.key"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import allComponent from './components/index'

    export default {
        name: "View",
        components: {allComponent},
        data() {
            return {
                componentList: [],
                backgroundStyle: ``,
                id:'',
            }
        },
        mounted() {
            // 从缓存中获取大屏配置数据
            this.id = this.$route.query.id
            const data = localStorage.getItem('screen'+this.id)
            if (data) {
                const temp = JSON.parse(data)
                if (temp.components) {
                    this.componentList = this.loadComponent(temp.components)
                }
                if (temp.background) {
                    const screen = document.querySelector('.screen-preview').getBoundingClientRect()
                    const scaleW = screen.width/temp.background.width
                    this.backgroundStyle = `
                    transform:scale(${scaleW},${scaleW});
                    width:${temp.background.width}px;
                    height:${temp.background.height}px;
                    background:url(${temp.background.bgUrl}) 0% 0% / 100% 100%;
                    `
                    document.querySelector('.screen-preview').style.height = temp.background.height*scaleW+'px'
                }
            }
        },
        methods: {
            /**
             * 加载组件到列表中
             * @param list
             * @returns {*}
             */
            loadComponent(list) {
                return list.map(com => {
                    if (com.objType !== 3) {
                        com.component = allComponent[com.componentName]
                    } else {
                        com.children = this.loadComponent(com.children)
                    }
                    return com
                })
            },
            locationStyle(location) {
                const {x, y, w, h} = location
                return `width:${w}px;height:${h}px;left:${x}px;top:${y}px;`
            }
        }
    }
</script>
<style>
    #app{
        overflow-y: auto;
    }
</style>
<style scoped lang="stylus">
    .screen-preview {
        position relative
        height 100%
        width 100%
        overflow hidden
        transform-origin 0 0
        background #1f386f
        .background{
            transform-origin 0 0
        }
        .location-info {
            position absolute
        }

        .group-child-box {
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center
        }
    }
</style>
